﻿@model CreateRecipeCommand
@{
    ViewData["Title"] = "Create Recipe";
}

<h2>@ViewData["Title"]</h2>
<hr />

<form asp-controller="Recipe" asp-action="Create" method="post" class="form-horizontal">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>

    @Html.Partial("_EditRecipePartial")

    <div class="form-group">
        @* Creating sub-items like this at the same time as the parent is a PITA unfortunately - hacky JS ensues for now! *@
        <table class="table table-striped" id="ingredients">
            <thead>
                <tr>
                    <th>Ingredient</th>
                    <th>Quantity</th>
                    <th>Unit</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < Model.Ingredients.Count; i++)
            {
                var ingredient = Model.Ingredients[i];
                    <tr>
                        <td>
                            <input asp-for="Ingredients[i].Name" />
                            <span asp-validation-for="Ingredients[i].Name" class="text-danger"></span>
                        </td>
                        <td>
                            <input asp-for="Ingredients[i].Quantity" />
                            <span asp-validation-for="Ingredients[i].Quantity" class=" text-danger"></span>
                        </td>
                        <td>
                            <input asp-for="Ingredients[i].Unit" />
                            <span asp-validation-for="Ingredients[i].Unit" class=" text-danger"></span>
                        </td>
                        <td>
                            <a href="#" class="remove">Remove</a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button type="button" class="btn btn-success" id="addIngredient">Add ingredient</button>
            <button type="submit" class="btn btn-primary">Create</button>
        </div>
    </div>
</form>

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
    <script>
        var ingredients = $('#ingredients tbody');
        $("#addIngredient").click(function () {
            var rowNo = ingredients.find('tr').length;
            var template =
                '<tr>' +
                '<td><input name="Ingredients[' + rowNo + '].Name" id="Ingredients_' + rowNo + '_Name" /></td>' +
                '<td><input name="Ingredients[' + rowNo + '].Quantity" id="Ingredients_' + rowNo + 'Quantity" /></td>' +
                '<td><input name="Ingredients[' + rowNo + '].Unit" id="Ingredients_' + rowNo + 'Unit" /></td>' +
                '</tr>';
            ingredients.append(template);
        });

        ingredients.on('click', '.remove', function (e) {
            $(this).closest('tr').remove();
        });
    </script>
}
